<template>
  <div class="chart-content-wrapper disease-type-cost-analyse-content-wrapper" @mouseenter="mouseenter()"
       @mouseleave="mouseleave">
    <top-filter :title="reportName" ref="topFilter">
      <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区"
                           :filter="filterN" type="planArea">
      </double-check-filter>
      <group-list-filter :defaultText="'医院等级'" :filter="filterN" :type="'detailHospital'"
                         @confirmDoubleSelect="confirmDoubleSelectDetailHospital" :isParentLinkChild="true">
      </group-list-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filterN" :type="'insuredType'"
                                     @confirmSingleSelect="confirmSingleSelectMedicalType">
      </single-list-filter-without-cb>
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="chooseYear" ref="yearsFilter">
      </single-list-filter-without-cb>
    </top-filter>
    <div class="chart-container chart-container1" v-show="isShowChart">
      <div class="disease-type-content flex-column-display">
        <div class="medical-title-box">
          <span class="medical-title-name">病种TOP20</span>
          <span class="title-bk-container"></span>
        </div>
        <div class="extra-style-display1">
          <el-radio v-model="radio" label="1">支出金额</el-radio>
          <el-radio v-model="radio" label="2">就诊人次</el-radio>
        </div>
        <div class="echarts-content-wrapper" id="left-top-echarts-id">

        </div>
        <div class="extra-style-display">
          <div class="colligateChart-go-next" @click="goToNext">
            查看更多病种  <span class="animated flash repeat-animate"> >> </span>
          </div>
          <div class="blank-content-wrapper"></div>
        </div>
      </div>
      <div class="disease-type-content left-disease-content flex-column-display">
        <div class="right-top-content-wrapper">
          <div class="medical-title-box">
            <span class="medical-title-name">收费类别比例</span>
            <span class="title-bk-container"></span>
          </div>
          <div class="echarts-content-wrapper" id="right-top-echarts-id">

          </div>
        </div>
        <div class="right-top-content-wrapper">
          <div class="medical-title-box">
            <span class="medical-title-name">支付比例</span>
            <span class="title-bk-container"></span>
          </div>
          <div class="echarts-content-wrapper" id="right-bottom-echarts-id">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getSearchItems} from '../../../api/api'
  import {setChartHeight, loadingOpt, isJanuary} from '../../../assets/js/utils.js'
  import TopFilter from '../../last/filter/top-filter1'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import GroupListFilter from '../../last/filter/group-list-filter.vue'
  import {setHospLevelAndHospCode, getDefaultThreeHospChildId} from  '../../last/chart/utils/dataUtils'
  import {getDiseaseTypeCostAnalyse, getCostTypeAnalyseAndPayRateAnalyse} from '../../../api/last-api'
  import {bus} from '../../last/filter/js/bus'
  export default {
    props: ['isChange', 'fullScreen', 'isCollapse'],
    components: {
      TopFilter,
      SingleListFilterWithoutCb,
      DoubleCheckFilter,
      GroupListFilter
    },
    data() {
      return {
        filterN: null,
        reportName: '病种支出分析',
        isShowChart: true,
        areaCode: null,
        medicalCategory: '',
        medicalCategoryName: '全部',
        queryYear: '',
        hospLevel: '',
        hospCode: null,
        resultLevel: '3',
        resultId: '',
        radio: '1',
        paixu: '2',
        yUnit: '单位：万元'
      }
    },
    created() {
    },
    mounted(){
      //获取筛选数据
      getSearchItems('init/initInput').then((res) => {
        if (res.code == 0) {
          this.filterN = res.data;
          this.initAreaCodeAndText()
          setTimeout(() => {
            // 设置默认月份
            this.queryYear = this.$refs.yearsFilter.getSingleListData()[0].selectName
            // 延迟请求左边的数据
            this.getLeftAllData()

          }, 200)
        }
      });
//      setChartHeight();

      // 初始化图表id
      this.leftCharts = this.$echarts.init(document.getElementById('left-top-echarts-id'), null, {renderer: 'canvas'})
      this.rightTopCharts = this.$echarts.init(document.getElementById('right-top-echarts-id'), null, {renderer: 'canvas'})
      this.rightBottomCharts = this.$echarts.init(document.getElementById('right-bottom-echarts-id'), null, {renderer: 'canvas'})

      this.leftCharts.getZr().on('click', params => {
        // 获取点击的点
        var pointInPixel = [params.offsetX, params.offsetY];
        // 判断点击的点是否在 gridId为 'two' 中
        if (this.leftCharts.containPixel({gridId: 'three'}, pointInPixel)) {

          var xIndex = this.leftCharts.convertFromPixel({seriesIndex: 0},
            [params.offsetX, params.offsetY])[1];

          this.selectPositon = xIndex
          this.disDetail = this.leftJson.disDetailList[this.selectPositon]
          this.drawLeftAllLine(this.leftJson)
          this.getRightTopData()

          this.sendFilterObj()
        }
      });

//      this.leftCharts.getZr().on('mouseover', params => {
//        console.log('111111111111=' + params)
//        // 获取点击的点
//        var pointInPixel = [params.offsetX, params.offsetY];
//        // 判断点击的点是否在 gridId为 'two' 中
//        if (this.leftCharts.containPixel({gridId: 'three'}, pointInPixel)) {
//
//          var xIndex = this.leftCharts.convertFromPixel({seriesIndex: 0},
//            [params.offsetX, params.offsetY])[1];
//
//          console.log('222aaaa=' + xIndex)
//
//        }
//      });
//      this.leftCharts.on('click', (item) => {
////        console.log(item)
//        if (item.componentSubType === 'bar') {
//          this.selectPositon = item.dataIndex
//          this.disDetail = this.leftJson.disDetailList[this.selectPositon]
//          this.drawLeftAllLine(this.leftJson)
//          this.getRightTopData()
//
//          this.sendFilterObj()
//        }
//      });
      this.leftCharts.on('mouseover', (item) => {
//        console.log(item)
        if (item.componentSubType === 'bar') {
          this.hoverPositon = item.dataIndex
//          this.disDetail = this.leftJson.disDetailList[this.selectPositon]
          this.drawLeftAllLine(this.leftJson)
//          this.getRightTopData()
        }
      });
      this.leftCharts.on('mouseout', (item) => {
//        console.log(item)
        if (item.componentSubType === 'bar') {
          this.hoverPositon = -100
//          this.disDetail = this.leftJson.disDetailList[this.selectPositon]
          this.drawLeftAllLine(this.leftJson)
//          this.getRightTopData()
        }
      });
    },
    methods: {
      sendFilterObj() {
        let disFilter = {
          areaCode: this.areaCode,
          areaCodeText: this.areaCodeText,
          hospLevel: this.hospLevel,
          resultLevel: this.resultLevel,
          hospCode: this.hospCode,
          medicalCategory: this.medicalCategory,
          medicalCategoryName: this.medicalCategoryName,
          queryYear: this.queryYear,
          disDetail: this.disDetail,
          filter: this.filterN
        }
        console.log(JSON.stringify(disFilter))
        bus.$emit('sendDiseaseTypeFilter', disFilter)
      },
      goToNext(){
        let disFilter = {
          areaCode: this.areaCode,
          areaName: this.areaCodeText,
          hospLevel: this.hospLevel,
          resultLevel: this.resultLevel,
          hospCode: this.hospCode,
          medicalCategory: this.medicalCategory,
          medicalCategoryName: this.medicalCategoryName,
          queryYear: this.queryYear,
          disDetail: this.disDetail
        }
        console.log(JSON.stringify(disFilter))
        this.$router.push({path: `/decision/medical-analysis/details-of-the-disease-detail`, query: disFilter})
      },
      confirmDoubleSelectDetailHospital(filter) {
        let hospLevelCodeObj = setHospLevelAndHospCode(this.filterN, filter)
        this.hospLevel = hospLevelCodeObj.hospLevel
        this.hospCode = hospLevelCodeObj.hospCode
        this.resultLevel = hospLevelCodeObj.resultLevel
        this.resultId = hospLevelCodeObj.resultId
        this.getLeftAllData()
      },
      confirmSingleSelectMedicalType(filter, selectName) {
        //医疗类别选择
        this.medicalCategory = filter;
        this.medicalCategoryName = selectName
        this.getLeftAllData();
      },
      initAreaCodeAndText() {
        let areaCode = []
        let areaCodeText = []
        this.filterN.nc.planArea.map((item, index) => {
          if (index > 0 && index <= 6) {
            areaCode.push(item.selectId)
            areaCodeText.push(item.selectName)
          }
        })
        this.areaCode = areaCode.join(',');
        this.areaCodeText = areaCodeText.join('、')

        this.hospCode = getDefaultThreeHospChildId(this.filterN).join(',')

      },
      getLeftAllData(){
        if (this.leftCharts) {
          this.leftCharts.clear();
          this.leftCharts.showLoading(loadingOpt)
        }
        if (this.rightTopCharts) {
          this.rightTopCharts.clear();
          this.rightTopCharts.showLoading(loadingOpt)
        }
        if (this.rightBottomCharts) {
          this.rightBottomCharts.clear();
          this.rightBottomCharts.showLoading(loadingOpt)
        }
        getDiseaseTypeCostAnalyse(this.areaCode, '', this.hospCode, this.hospLevel,
          this.medicalCategory, this.paixu, this.queryYear, '20').then(response => {
          this.leftJson = response.data;
          if (response.code == 0) {
            this.isShowChart = true;
            this.leftCharts.hideLoading();
//            this.reportName = json.reportName;
//            this.conclusion = json.conclusion;
//            this.remark = json.remark;
            // 根据返回的第一项数据的disCode获取右边的数据
            this.selectPositon = 0
            this.disDetail = this.leftJson.disDetailList[this.selectPositon]
            this.drawLeftAllLine(this.leftJson)
            this.getRightTopData()

            this.sendFilterObj()
          } else {
            this.isShowChart = false;

            // 数据为空
            this.disDetail = {}
            this.sendFilterObj()
          }
        }).catch(res => {
          console.log(res)
          this.isShowChart = false;
        })
      },
      drawLeftAllLine(json){
//        let avg = this.avg(json.institutionGrowthRateList)
//        let curYear = `${this.queryYear}年`;
//        let lastYear = `${this.queryYear - 1}年`;
        let that = this;
        let hosName = [];
        json.disList.map((item, index) => {
          let length = item.length;
          if (length > 7) {
            item = item.substring(0, 7) + '...'
          }
          hosName.push(item);
        })

        let barDataList = [];
        json.dataList.map((item, index) => {
          if (this.hoverPositon == index) {
            let data = {
              value: item,
              itemStyle: {
                color: '#3281FD',
              },
            }
            barDataList.push(data);
          } else {
            if (this.selectPositon == index) {
              let data = {
                value: item,
                itemStyle: {
                  color: '#79ADFF',
                },
              }
              barDataList.push(data);
            } else {
              let data = {
                value: item,
                itemStyle: {
                  color: '#13499E',
                },
              }
              barDataList.push(data);
            }
          }
        })
//        console.log('aaaa=' + JSON.stringify(hosName))
//        let max = null
//        let min = null
//        let num = seqencingArr(json.institutionGrowthRateList, json.avgGrowthRate);
//        if (json.avgGrowthRate > 0 && num) {
//          max = num
//        } else if (json.avgGrowthRate < 0 && num) {
//          min = -num
//        }
        // 绘制图表
        this.leftCharts.setOption({
          // Make gradient line here
//          title: {
//            subtext: '单位：万元',
//            left: '14%',
//            top: '0%',
//            x: 'left',
//            subtextStyle: {
//              color: '#fff'
//            }
//          },
          grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
//            {
//              width: '18%',
//              left: '75%',
//              height: '78%',
//              top: '12%',
//              tooltip: {
//                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
//              }
//            },
            {
              width: '70%',
              left: '20%',
              height: '92%',
              top: '8%',
              id: 'three',
              tooltip: {
                formatter: "{b}</br>{c}万元" //给当前坐标系添加弹窗
              }
            }
          ],
//          legend: {
//            left: 'center',
//            top: '95%',
//            icon: 'rect',
//            itemWidth: 30,
//            itemHeight: 6,
//            itemGap: 20,
//            data: [curYear, lastYear],
//            textStyle: {
//              color: '#fff'
//            },
//            tooltip: {
//              show: true,
//
//              formatter: function (params) {
//                let txt = '';
//                // if(params.name=='增长额(正)'){
//                //   txt = '增长额（正）</br>即区域内医疗机构医疗总收入增长额=（区</br>域内医疗机构本年度住院收入+本年度门</br>诊收入）-（区域内医疗机构上年年度院收</br>入+上年度门诊收入）'
//                // }else if(params.name=='增长额(负)'){
//                //   txt = '增长额（负）</br>即区域内医疗机构医疗总收入增长额=（区</br>域内医疗机构本年度住院收入+本年度门</br>诊收入）-（区域内医疗机构上年年度院收</br>入+上年度门诊收入）'
//                // }else{
//                //   txt = '总额'
//                // }
//                return params.name + '医疗费用总额';
//              }
//            }
//          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 12
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
//                color: 'rgba(0,0,0,0)',
                color: 'rgba(150,150,150,0.3)'
              }
            },
            formatter: function (params) {
//              console.log(params)
              let dataIndex = params[0].dataIndex;
              return `<span style="color: #fff">${json.disDetailList[dataIndex].disName}</span></br>
                      <span style="color: #fff">支出总金额: ${json.disDetailList[dataIndex].amount}</span></br>
                      <span style="color: #fff">次均支出: ${json.disDetailList[dataIndex].avePayOfNum}</span></br>
                      <span style="color: #fff">人均支出: ${json.disDetailList[dataIndex].avePayOfPerson}</span></br>
                      <span style="color: #fff">就诊人次: ${json.disDetailList[dataIndex].countOfnum}</span></br>
                      <span style="color: #fff">就诊人数：${json.disDetailList[dataIndex].countOfPerson}</span>`;
            }
            /*trigger: 'axis',
             axisPointer : {
             type : 'shadow'
             }*/
          },
          xAxis: [
//            {
//              type: 'value',
//              /* show:true,*/
//              splitLine: {
//                show: false
//              },
//              position: 'top',
//              /* minInterval:5,*/
//              max: max,
//              min: min,
//              splitNumber: 2,
//              axisLine: {
//                show: false
//              },
//              axisLabel: {
//                formatter: '{value}',
//                textStyle: {
//                  color: '#fff'
//                }
//              },
//              axisTick: {
//                show: false
//              }
//
//            },
            {
              type: 'value',
              splitLine: {show: false},
//              gridIndex: 1,
              axisLine: {
                show: false
              },
              axisLabel: {
                show: false,
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
//            {
//              /*data: json.medInstitutionList,*/
//              data: hosName,
//              splitLine: {
//                show: false
//              },
//              axisLine: {
//                show: true,//显示y轴坐标线并设置为虚线
//                lineStyle: {
//                  type: 'solid',
//                  color: '#2a4565'
//                }
//              },
//              axisTick: {
//                show: false //不显示y轴坐标的刻度
//              },
//              axisLabel: {
//                show: false //不显示y轴坐标数值
//              }
//            },
            {
//              triggerEvent: true,
              name: this.yUnit,
              inverse: true,
              nameLocation: 'start',
              nameTextStyle: {
                color: '#ffffff'
              },
              /*data: json.medInstitutionList,*/
              data: hosName,
//              gridIndex: 1,
              axisLine: { //y轴的横线是否显示
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisTick: { //y轴的刻度短竖线是否显示
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: function (value, index) {
                    if (that.hoverPositon == index) {
                      return '#3281FD';
                    } else {
                      if (that.selectPositon == index) {
                        return '#79ADFF';
                      } else {
                        return '#ffffff';
                      }
                    }
                  }
                },
              },
            }
          ],
//          visualMap: [
//            {
//              show: true,
//              dimension: 0,
//              seriesIndex: 0,
//              left: 'center',
//              top: 'top',
//              orient: "horizontal",
//              itemWidth: 10,
//              itemHeight: 10,
//              textStyle: {
//                color: '#fff'
//              },
//              pieces: [
//                {
//                  max: json.avgGrowthRate,
//                  color: '#67ffdb',
//                  symbol: 'circle',
//                  label: '增长率（低于平均值）',
//                }, {
//                  min: json.avgGrowthRate,
//                  color: '#2b9ff6',
//                  symbol: 'circle',
//                  label: '增长率（高于平均值）'
//                }
//              ],
//            }
//          ],
          series: [
//            {
//              type: 'scatter',
//              showSymbol: true,
//              data: json.institutionGrowthRateList,
//              symbolSize: 10,
//              label: {
//                show: true,
//                position: 'right',
//                formatter: '{c}%',
//                color: '#fff'
//              },
//              tooltip: {
//                show: true,
//                formatter: function (par) {
//                  let i = par.dataIndex;
//                  let txt = '';
//                  json.medInstitutionList.map((item, index) => {
//                    if (index == i) {
//                      txt = `<span style="color:${par.color}">${item}</span><br><span style="color:#c7c7c7">增长率：${par.value}%</span>`
//                    }
//                  })
//                  return txt;
//                }
//              },
//              markLine: {
//                label: {
//                  position: 'start',
//                  formatter: '{c}%',
//                  color: '#fff'
//                },
//                symbol: 'none',
//                data: [
//                  {
//                    xAxis: json.avgGrowthRate,
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter: function (par) {
//                        return `<span style="color:${par.color}">平均增长率</span><br><span style="color:#c7c7c7">${par.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
//            },
//            {
//              type: 'bar',
//              showSymbol: false,
//              /*name: `${this.queryYear}年`,*/
//              name: curYear,
//              barGap: 0,
//              itemStyle: {
//                color: '#ff6a93',
//                borderWidth: 0
//              },
//              data: json.currYearMedTotalFeeList,
//              tooltip: {
//                show: true,
//                formatter: function (par) {
//                  let i = par.dataIndex;
//                  let txt = '';
//                  json.medInstitutionList.map((item, index) => {
//                    if (index == i) {
//                      txt = `<span style="color:${par.color}">${item}</span><br><span style="color:#c7c7c7">${par.seriesName}：${par.value}万元</span>`
//                    }
//                  })
//                  return txt;
//                }
//              },
//              label: {
//                show: true,
//                position: 'right',
//                formatter: '{c}',
//                color: '#fff'
//              },
//              markLine: {
//                symbol: 'none',
//                label: {
//                  position: 'start',
//                  formatter: '{c}',
//                  color: '#fff'
//                },
//                lineStyle: {
//                  color: '#a66cd6'
//                },
//                data: [
//                  {
//                    name: '平均',
//                    xAxis: json.avgMedFee,
//                    tooltip: {
//                      show: true,
//                      formatter(par){
//                        return `<span style="color:${par.color}">平均</span><br><span style="color:#c7c7c7">${par.value}万元</span>`
//                      }
//                    }
//                  }
//                ]
//              },
//              barWidth: '30%',
//              barMaxWidth: 20,
//              xAxisIndex: 1,
//              yAxisIndex: 1
//            },
            {
              type: 'bar',
              /*name:`${this.queryYear-1}年`,//此值与legend图例对应*/
//              name: lastYear,
//              itemStyle: {
//                color: '#13499E',
//              },
              emphasis: {
                itemStyle: {
                  color: '#3281FD',
                },
//                label: {
//                  color: '#79ADFF',
//                },
              },
              label: {
                show: true,
                position: 'right',
                formatter: '{c}',
                color: '#fff',
              },
              showSymbol: false,
              data: barDataList,
              barWidth: '35%',
              barMaxWidth: 30,
//              xAxisIndex: 1,
//              yAxisIndex: 1
            }
          ]
        });
      },
      getRightTopData() {
        if (this.rightTopCharts) {
          this.rightTopCharts.clear();
          this.rightTopCharts.showLoading(loadingOpt)
        }
        if (this.rightBottomCharts) {
          this.rightBottomCharts.clear();
          this.rightBottomCharts.showLoading(loadingOpt)
        }
        getCostTypeAnalyseAndPayRateAnalyse(this.areaCode, this.disDetail.disCode, this.hospCode, this.hospLevel,
          this.medicalCategory, this.queryYear).then(response => {
          this.rightBigJson = response.data;
          if (response.code == 0) {
//            this.isShowChart = true;
            this.rightTopCharts.hideLoading();
            this.rightBottomCharts.hideLoading();
//            this.reportName = json.reportName;
//            this.conclusion = json.conclusion;
//            this.remark = json.remark;
            this.drawRightTopChart(this.rightBigJson.chargeData)
            this.drawRightBottomChart(this.rightBigJson)
          } else {
//            this.isShowChart = false;
          }
        }).catch(res => {
          console.log(res)
//          this.isShowChart = false;
        })
      },
      drawRightTopChart(json) {
        let colorList = ['#55CDB7', '#FFD66A', '#FF9966', '#FF6A93', '#3281FD'];
        let legendData = []
        json.descList.forEach((item, dataIndex) => {
          legendData.push({
            // name: `{c|}{a|${item}}{b|${json.ratioList[dataIndex]}%}`,
            name: `{a|${item}}{b|${json.ratioList[dataIndex]}%}`,
            value: json.ratioList[dataIndex],
            textStyle: {
              rich: {
                a: {
                  color: '#ffffff',
                  lineHeight: 15,
                  verticalAlign: 'bottom',
                  padding: [0, 0, 0, 10],
                },
                b: {
                  color: colorList[dataIndex],
                  lineHeight: 15,
                  fontSize: 15,
                  padding: [0, 0, 0, 10],
                  verticalAlign: 'bottom'
                },
                c: {
                  backgroundColor: colorList[dataIndex],
                  width: 10,
                  height: 10,
                  verticalAlign: 'bottom',
                  lineHeight: 15,
                },
                d: {
                  backgroundColor: 'rgba(0,0,0,0)',
                  width: 10,
                  height: 10,
                  verticalAlign: 'bottom',
                  lineHeight: 30,
                }
              }
            }
          })
        })
        // 绘制图表
        this.rightTopCharts.setOption(
          {
            title: {
              subtext: `病种名称：${this.disDetail.disName}\n\n单位：万元`,
              left: '4%',
              x: 'left',
              subtextStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              show: true,
              textStyle: {
                fontSize: 12
              },
              formatter: function (params) {
//                console.log(params)
                let dataIndex = params.dataIndex;
                return `<span style="color: #fff">病种支出</span></br>
                      <span style="color: #fff">收费类别: ${json.dataList[dataIndex].typeName}</span></br>
                      <span style="color: #fff">金额: ${json.dataList[dataIndex].amount}</span></br>
                      <span style="color: #fff">占比：${json.dataList[dataIndex].ratio}</span>`;
              },
            },
            legend: [
              {
                orient: 'vertical',
                // x: 'left',
                top: '20%',
                left: '65%',
                selectedMode: false,
                textStyle: {
                  color: '#fff'
                },
                itemWidth: 10,
                itemHeight: 10,
                data: legendData,
              },
//              {
//                orient: 'vertical',
//                top: '40%',
//                left: '75%',
//                textStyle: {
//                  color: '#fff'
//                },
//                icon: 'rect',
//                itemWidth: 10,
//                itemHeight: 10,
//                selectedMode: false,
//                data: data.pieData.numDesc
//              }
            ],
            series: [
              {
                name: '基于性别的养老支出统计',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['40%', '45%'],
                clockwise: false,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                minAngle: 5,
                label: {
                  show: true,
                  position: 'center',
                  formatter: function (params) {
                    if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                      return `{a|${json.amount}}\n{b|医疗支出}`
                    } else {
                      return ''
                    }
                  },
                  rich: {
                    a: {
                      color: '#ffffff',
                      lineHeight: 20,
                      fontSize: 16,
                      fontWeight: 700
                    },
                    b: {
                      color: '#ffffff',
                      lineHeight: 20
                    }
                  }
                },
                itemStyle: {
                  color: function (params) {
                    return colorList[params.dataIndex]
                  }
                },
                data: legendData
              },
//              {
//                name: '基于性别的养老支出统计',
//                type: 'pie',
//                hoverAnimation: false,
//                radius: ['60%', '80%'],
//                clockwise: false,//是否按顺时针来排布 false为按逆时针排布。
//                label: {
//                  show: false,
//                },
//                itemStyle: {
//                  color: function (params) {
//                    let colorList = ['#3281fd', '#ff6a93', '#888', '#ccc'];
//                    return colorList[params.dataIndex]
//                  }
//                },
//                data: data1
//              }
            ]
          }
        )
      },
      drawRightBottomChart(json) {
        // 绘制图表
//        let proportion = json.allSpendList[0].value / (Number(json.allSpendList[0].value) + Number(json.allSpendList[1].value));//此值为个人支付比例
//        let startAngle = 0;
//        startAngle = parseInt(360 * proportion / 2)
        let leftPieData = []
        json.overallData.descList.forEach((item, dataIndex) => {
          leftPieData.push({
            name: item,
            value: json.overallData.ratioList[dataIndex],
            textStyle: {}
          })
        })
        let centerPieData = []
        json.medicalData.descList.forEach((item, dataIndex) => {
          centerPieData.push({
            name: item,
            value: json.medicalData.ratioList[dataIndex],
            textStyle: {}
          })
        })
        let rightPieData = []
        json.personalData.descList.forEach((item, dataIndex) => {
          rightPieData.push({
            name: item,
            value: json.personalData.ratioList[dataIndex],
            textStyle: {}
          })
        })

        let bigLineP = [{name: '', x: '38%', y: '70%'}, {x: '30%', y: '70%'}];
        let bigLineN = [{name: '', x: '63%', y: '60%'}, {x: '72%', y: '60%'}];
        let smallLine1 = [{x: '26%', y: '58%'}, {x: '30%', y: '70%'}];
        let smallLine2 = [{x: '74%', y: '48%'}, {x: '72%', y: '60%'}];
        this.rightBottomCharts.setOption({
          title: {
            subtext: `病种名称：${this.disDetail.disName}\n\n单位：万元`,
            left: '4%',
            x: 'left',
            subtextStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            /* trigger: 'item',*/
            textStyle: {
              fontSize: 12
            },
            show: true,
            formatter: "{b} :<br/> {c}万元 ({d}%)"
          },
          legend: [
            {
              left: '65%',
              top: '70%',
              orient: 'vertical',
              itemWidth: 10,
              itemHeight: 10,
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `${params.name}占比`
//                }
//              },
              textStyle: {
                color: '#fff'
              },
              data: centerPieData,
            },
            {
              orient: 'vertical',
              left: '13%',
              top: '65%',
              textStyle: {
                color: '#fff'
              },
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `${params.name}占比`
//                }
//              },
              /*selectedMode: false,*/
              itemWidth: 10,
              itemHeight: 10,
              data: leftPieData
            },
            {
              orient: 'vertical',
              left: '84%',
              top: '35%',
              /*selectedMode: false,*/
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `${params.name}占比`
//                }
//              },
              textStyle: {
                color: '#fff'
              },
              itemWidth: 10,
              itemHeight: 10,
              data: rightPieData
            }
          ],
          series: [
            {
//              name: '占比',
              zlevel: 3,
              type: 'pie',
              radius: ['33%', '50%'],
              center: ['50%', '69%'],
              minAngle: 5,
              data: centerPieData,
              clockwise: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              tooltip: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
                formatter: function (params) {
//                console.log(params)
                  let dataIndex = params.dataIndex;
                  return `<span style="color: #fff">病种支出</span></br>
                      <span style="color: #fff">支付类型: ${json.medicalData.dataList[dataIndex].typeName}</span></br>
                      <span style="color: #fff">金额: ${json.medicalData.dataList[dataIndex].amount}</span></br>
                      <span style="color: #fff">占比：${json.medicalData.dataList[dataIndex].ratio}</span>`;
                },
              },
              label: {
                show: true,
                position: 'center',
                formatter: function (params) {
                  if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                    return `{a|${json.medicalData.amount}}\n{b|医疗支出}`
                  } else {
                    return ''
                  }
                },
                rich: {
                  a: {
                    color: '#ffffff',
                    lineHeight: 20,
                    fontSize: 14,
                    fontWeight: 700
                  },
                  b: {
                    color: '#ffffff',
                    lineHeight: 20
                  }
                }
              },
              itemStyle: {
                color: function (params) {
                  // build a color map as your need.
                  let colorList = ['#FFD66A', '#3281FD'];
                  return colorList[params.dataIndex]
                },
                borderWidth: 0
              },
            },
            {
//              name: '统筹基金支付比例占比',
              zlevel: 2,
              type: 'pie',
              radius: ['27%', '40%'],
              center: ['20%', '40%'],
              minAngle: 5,
              clockwise: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              tooltip: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
                formatter: function (params) {
//                console.log(params)
                  let dataIndex = params.dataIndex;
                  return `<span style="color: #fff">病种支出</span></br>
                      <span style="color: #fff">补偿支付类型: ${json.overallData.dataList[dataIndex].typeName}</span></br>
                      <span style="color: #fff">金额: ${json.overallData.dataList[dataIndex].amount}</span></br>
                      <span style="color: #fff">占比：${json.overallData.dataList[dataIndex].ratio}</span>`;
                },
              },
              markLine: {
                symbol: 'none',
                silent: true,//图形是否不响应和触发鼠标事件 默认为 false，即响应和触发鼠标事件。
                lineStyle: {
                  type: 'solid',
                  color: '#ffffff'
                },
                data: [smallLine1, bigLineP]
              },
              itemStyle: {
                color: function (params) {
                  // build a color map as your need.
                  let colorList = ['#fec644', '#FF9966', '#FF6A93'];
                  return colorList[params.dataIndex]
                },
                borderWidth: 0
              },
              data: leftPieData,
              label: {
                show: true,
                position: 'center',
                formatter: function (params) {
                  if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                    return `{a|${json.overallData.amount}}\n{b|统筹支出}`
                  } else {
                    return ''
                  }
                },
                rich: {
                  a: {
                    color: '#ffffff',
                    lineHeight: 20,
                    fontSize: 13,
                    fontWeight: 700
                  },
                  b: {
                    color: '#ffffff',
                    lineHeight: 20
                  }
                }
              },
            },
            {
//              name: '个人支付比例占比',
              zlevel: 1,
              type: 'pie',
              radius: ['27%', '40%'],
              center: ['75%', '25%'],
              minAngle: 5,
              data: rightPieData,
              clockwise: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              tooltip: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
                formatter: function (params) {
//                console.log(params)
                  let dataIndex = params.dataIndex;
                  return `<span style="color: #fff">病种支出</span></br>
                      <span style="color: #fff">个人支付类型: ${json.personalData.dataList[dataIndex].typeName}</span></br>
                      <span style="color: #fff">金额: ${json.personalData.dataList[dataIndex].amount}</span></br>
                      <span style="color: #fff">占比：${json.personalData.dataList[dataIndex].ratio}</span>`;
                },
              },
              itemStyle: {
                color: function (params) {
                  // build a color map as your need.
                  let colorList = ['#55CDB7', '#7d8bfc'];
                  return colorList[params.dataIndex]
                },
                borderWidth: 0.01,
              },
              markLine: {
                symbol: 'none',
                silent: true,
                lineStyle: {
                  type: 'solid',
                  color: '#ffffff'
                },
                data: [smallLine2, bigLineN]
              },
              label: {
                show: true,
                position: 'center',
                formatter: function (params) {
                  if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                    return `{a|${json.personalData.amount}}\n{b|个人支出}`
                  } else {
                    return ''
                  }
                },
                rich: {
                  a: {
                    color: '#ffffff',
                    lineHeight: 20,
                    fontSize: 13,
                    fontWeight: 700
                  },
                  b: {
                    color: '#ffffff',
                    lineHeight: 20
                  }
                }
              },
            }
          ]

        })
      },
      planAreaSelect(filter, selectName){
        //统筹区选择
        this.areaCode = filter.join(',')
        this.areaCodeText = selectName.join('、')
        this.getLeftAllData();
      },
      chooseYear(year){
        this.queryYear = year;
        this.getLeftAllData();
      },
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      },
    },
    watch: {
      radio(newVla) {
        if (newVla == 1) {
          this.paixu = 2
          this.yUnit = '单位：万元'
        } else {
          this.paixu = 1
          this.yUnit = '单位：人次'
        }
        this.getLeftAllData();
      },
      isChange(){
        console.log('isChange-----------')
        setTimeout(() => {
          this.leftCharts.resize();

          this.rightTopCharts.clear();
          this.rightBottomCharts.clear();
          this.drawRightTopChart(this.rightBigJson.chargeData)
          this.drawRightBottomChart(this.rightBigJson)
        }, 201)
//        setTimeout(() => {
//
//        }, 1700)
//        setTimeout(() => {
//
//        }, 2900)
      }
    }
  };
</script>

<style lang="scss">
  .disease-type-cost-analyse-content-wrapper {
    display: flex;
    flex-direction: column;

    .chart-container1 {
      display: flex;
      flex: 1;
    }
    .disease-type-content {
      flex: 1;
      height: 100%;
    }
    .left-disease-content {
      border-left: solid 1px #1d2027;
    }

    .flex-column-display {
      display: flex;
      flex-direction: column;
    }

    .extra-style-display {
      padding: 20px 0;
      box-sizing: border-box;
      display: flex;
    }

    .extra-style-display1 {
      padding: 5px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
    }

    .colligateChart-go-next {
      cursor: pointer;
      margin-top: 3px;
      margin-left: 4%;
      line-height: 28px;
      height: 28px;
      padding: 0 15px;
      border-radius: 5px;
      border: solid 1px #67ffdb;
      color: #67ffdb;
    }

    .blank-content-wrapper {
      flex: 1;
    }

    .medical-title-box {
      height: 32px;
      line-height: 32px;
      float: left;
      margin-top: 10px;
      margin-left: 4%;
    }

    .medical-title-box span {
      float: left;
    }

    .medical-title-name {
      color: #fff;
      background: #2e4a74;
      box-sizing: border-box;
      padding-left: 10px;
    }
    .title-bk-container {
      width: 25px;
      height: 32px;
      background: url('../../../assets/img/title-bk.png');
    }
    .medical-chart-box {
      clear: both;
    }

    .right-top-content-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .echarts-content-wrapper {
      /*flex: 1;*/
      width: 100%;
      height: 90%;
    }

  }

</style>
